<template>
  <li :class="['serviceItem', 'listItem', 'flex-row', uistate.accountid === accountid && 'active']"
    v-if="data"
    @click="click(data)"
    >
    <div class="flex-row autoGrow">
      <div class="listItemAvatar">
        <el-avatar shape="square" class="listItemAvatar" :src="data.src||data.avatar||defaultAvatar" :size="40" fit="cover" />
        <span class="no-read-cnt" v-if="data.noReadCnt">{{data.noReadCnt}}</span>
      </div>
      
      <div class="serviceItemInfo listItemInfo flex-column">
        <div class="serviceItemTopInfo listItemTopInfo flex-row">
            <div class="serviceItemName listItemName textEllipsis">{{data.nick}}</div>
            <div class="editServiceInfo listItemTopInfoIcon"
              @click.stop="editServiceInfo"
              v-if="showBadge && true">
            </div>
            <div class="alwaysTop listItemTopInfoIcon"
              @click="toggleServiceAlwaysTop(data)"
              v-else-if="showBadge && data.always_top">
            </div>
        </div>
        <div class="serviceItemBottomInfo listItemBottomInfo flex-row">
          <span>{{isOnline?'[在线]':'[离线]'}}</span>
          <span v-if="data.friendcount||data.friendcount==0">好友{{data.friendcount}}</span>
          <span v-if="data.groupCount||data.groupCount==0">群{{data.groupCount}}</span>
        </div>
      </div>
    </div>
    <slot></slot>
  </li>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'serviceListItem',
  props: ['currentServiceWxId', 'accountid', 'showBadge', 'item'],
  created(){
    
  },
  mounted(){
    this.onlineCheck()
  },
  destroyed(){
    this.onlineTimer && clearTimeout(this.onlineTimer)
  },
  data(){
    return {
      onlineTimer:null,
      nowTime: +new Date() 
    }
  },
  computed:{
    ...mapState([
      'uistate',
      'accountMap'
      ]),
    data(){
      return this.accountMap[this.accountid]||this.item  
    },  
    isOnline(){
      let isonline = true;
      const data = this.data
      const nowTime = this.nowTime 
      if(data){
        var onlinetime = data.logintime;
        if (nowTime - new Date(onlinetime) > 1000 * 60 * 1) {
            isonline = false
        }
      }
      if(this.accountMap[this.accountid])this.accountMap[this.accountid].isonline = isonline
      return isonline
    }  
  },
  watch:{
    // uistate(val){
    //   this.data = this.accountMap[this.accountid]
    // },
    // accountMap(val){
    //   this.data = this.accountMap[this.accountid]

    // },
  },
  methods: {
    ...mapMutations(['updateUIState']),
    click(item) {
      this.updateUIState({ accountid:item.id })
      // this.$emit('click', item)
    },
    editServiceInfo() {
      this.$emit('editServiceInfo')
    },
    onlineCheck(){
      this.onlineTimer = setTimeout( ()=> {
        this.nowTime = +new Date()
        this.onlineCheck()
      }, 60 * 1000)
      
    }
  }
}
</script>
<style scoped>
.listItemAvatar{
  position: relative;
  background-color: #ccc;
 
}
.listItemAvatar img{
  width: 40px;
  height: 40px;
  border-radius: 3px;

}
.listItemName{
  margin-bottom: 0
}
.no-read-cnt{
  position: absolute;
  display: inline-block;
  padding: 0 6px;
  font-size: 12px;
  text-align: center;
  background-color: #FF5722;
  color: #fff;
  right: -10px;
  height: 16px;
  line-height: 16px;
  border-radius: 8px;
  top: -4px;
}
.serviceItem .editServiceInfo{
  display: none
}
.serviceItem.active .editServiceInfo{
  display: block
}
</style>